<script setup>
import { ref, computed } from 'vue'

/*
计算属性：依赖一个或者多个值产生一个新的值
特点：它具有缓存特性，依赖的值变化了，它会实时变化 
用法：
   1:导入  import {computed} from 'vue'
   2:定义
      const 变量=computed(()=>{
        return 新的值
      })
      该变量是ref类型的数据(和ref返回值是一样的)
      html:变量
      js:变量.value
需求：'abcde'反转

v-model的值能不能=计算属性的值的值?
能与不能都不对
默认是不可以的，但可以给计算属性加set处理后就可以了

vue3
  const xxx=computed({
    get(){
      return 新的值
    },
    set(value){

    }
  })

*/
const str = ref('abcde')
const reStr = computed(() => {
  return str.value.split('').reverse().join('')
})

const xxx = computed(() => {
  return '字符:' + str.value
})
const age = ref(18)
const num = computed({
  get () {
    return age.value + 2
  },
  set (val) {
    age.value = val - 2
  }
})
</script>

<template>
  <div class="page">
    <h2>{{ str }}</h2>
    <h2>{{ xxx }}</h2>
    <h3>{{ reStr }}</h3>
    <h3>{{ reStr }}</h3>
    <h3>{{ reStr }}</h3>
    <h3>{{ reStr }}</h3>
    <div>小红今年{{ age }},二年后是:</div>
    <input type="text" v-model="num" />
  </div>
</template>

<style scoped></style>
